<script setup lang="ts">
import { ref, onMounted, defineExpose } from "vue";
import FcDesigner from "@form-create/designer";
const props = defineProps<{}>();

const designer = ref(null);
const formData = ref({});

const designerConfig = ref({
  // showMenuBar: false, // 隐藏左侧工具栏__无效
  showComponentName: false, // 是否显示组件的编号
  showFormConfig: false, // 是否显示表单配置
  showStyleForm: false, // 是否显示组件的样式配置表单
  showEventForm: false, // 是否显示组件的事件配置表单
  showCustomProps: false, // 隐藏组件的自定义属性配置
  showControl: false, // 是否显示组件联动
  showInputData: false, // 是否显示录入按钮
  // showSaveBtn: true, // 是否显示保存按钮

  // 隐藏基础组件 说明:https://view.form-create.com/hidden-item#%E9%9A%90%E8%97%8F%E7%BB%84%E4%BB%B6
  hiddenItem: [
    "password",
    "rate",
    "timeRange",
    "slider",
    // "dateRange",
    "colorPicker",
    "cascader",
    "elTransfer",
    "tree",
    "elTreeSelect",
  ],
  // 隐藏菜单
  hiddenMenu: ["subform", "aide", "layout"],

  // 隐藏指定配置项
  hiddenItemConfig: {
    default: [
      "field", // 字段名(key)
      "info", // 提示信息
      "maxlength", // 输入的最大字符数
      "clearable", // 清除按钮
      "type", // 类型
      "autosize", // 文本域是否自适应
      "rows", // 行数
      "formCreateWrap>labelWidth", // 标签的宽度
      "textColor", // 按钮形式激活时的文本颜色
      "fill", // 按钮形式激活时的填充色和边框色
      "max", // 可被勾选的最大数量
      "min", // 可被勾选的最小数量
      "multipleLimit", // 多选的最大数量
      // "filterable", // 是否可搜索
      "remote", // 是否从远程加载
      "remoteMethod", // 是否从远程加载事件
      "allowCreate", // 是否允许用户创建新条目
      "noDataText", // 选项为空时显示的文字
      "defaultFirstOption", // 按回车时选择的第一个匹配项
      "width", // 开关宽度
      "activeColor", // 打开时的背景色
      "inactiveColor", // 关闭时的背景色
      "activeValue", // 打开时的值 true
      "inactiveValue", // 关闭时的值 false
      "pickerOptions", // 当前时间日期选择器特有的选项
      "align", // 对其方式
      "editable", // 时间文本框是否可以编辑
      "format", // 显示在输入框中的格式(?)
      "rangeSeparator", // 分隔符
      "unlinkPanels", // 在范围选择器里取消两个日期面板之间的联动
      "readonly", //是否只读
      "disabled", // 重写禁用
      "_optionType", // 远程数据tab
      "input", // 单选多选的是否可以填写
      "collapseTags", // 多选时是否将选中值按文字的形式展示
    ],
    // 范围选择时开始日期的占位内容,范围选择时结束日期的占位内容
    datePicker: ["startPlaceholder", "endPlaceholder"],
    // 设置上传
    upload: [
      "beforeUpload", // 上传文件之前触发
      "beforeRemove", // 删除文件之前触发
      "onSuccess", // 上传成功时触发
      "withCredentials", // 支持发送 cookie 凭证信息
      "autoUpload", // 是否在选取文件后立即进行上传
      "headers", // 请求头
      "data", // 请求参数
      "action", // 请求地址
      // "limit", // 最大允许上传个数
    ],
  },

  // appendConfigData: ["formCreateDbField>disabled"],
  // 基础配置
  baseRule: {
    prepend: true,
    rule() {
      return [];
    },
  },
  // 属性配置添加
  componentRule: {
    // 全部添加
    default: {
      prepend: true,
      // append: true, // 添加到底部
      rule() {
        return [
          {
            type: "inputNumber",
            field: "formRow",
            title: "宽度(默认为一行的1/4)",
            value: 1,
            props: {
              min: 1,
              max: 4,
            },
          },
          {
            type: "switch",
            field: "formCreateProps>disabled",
            title: "是否禁用(禁用后页面不展示)",
          },
          // {
          //   type: "input",
          //   field: "value",
          //   title: "默认值",
          //   value: 1,
          // },
        ];
      },
    },
    inputNumber: {
      // prepend: true,
      append: true, // 添加到底部
      rule() {
        return [
          {
            type: "inputNumber",
            field: "value",
            title: "默认值",
            value: 1,
          },
        ];
      },
    },
  },
  // 验证配置
  validateRule: {
    rule() {
      return [
        {
          type: "switch",
          field: "$required",
          title: "是否必填",
        },
      ];
    },
  },
});
function getRuleData() {
  let formRow = 1;
  let data = designer.value.getRule();
  data.forEach((ele) => {
    delete ele.field;
    delete ele.info;
    delete ele._fc_id;
    delete ele.name;
    delete ele.display;
    delete ele.hidden;
    delete ele._fc_drag_tag;
    delete ele.effect;
    // delete ele.value;
    // 添加宽度(默认为一行的1/4)默认值:1
    if (!ele.props) {
      ele.props = { formRow, disabled: false };
    } else {
      if (!ele.props.formRow) {
        ele.props.formRow = formRow;
      }
      if (!ele.props.disabled) {
        ele.props.disabled = false;
      }
    }
  });
  return data;
  // console.log(data);
}

function setRuleData(data) {
  // console.log(designer.value.getRule());
  designer.value.setRule(data);
  // console.log(designer.value.setRule(data));
}

onMounted(() => {});
defineExpose({ getRuleData, setRuleData });
</script>

<template>
  <div class="formBox">
    <fc-designer ref="designer" v-model="formData" :config="designerConfig" />
  </div>
</template>

<style>
.formBox {
  width: 100%;
  height: 100%;
}
._fc-l-menu {
  display: none !important;
}
._fc-m-tools-l {
  .devices {
    display: none;
  }
  .line {
    display: none;
  }
}
._fc-m-con {
  padding: 20px !important;
  overflow: hidden;
  a {
    display: none !important ;
    transform: translateY(500px);
  }
}
</style>
